// 导入three.js模块
import * as THREE from "three";
// 导入轨道控制器所依赖文件
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入可视化控制工具
import * as dat from "dat.gui";
// 1、创建一个场景
const scene = new THREE.Scene();
// 2、创建一个透视相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
// 设置相机的位置  添加到场景中
camera.position.set(0, 0, 10);

// 导入三维坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

/**
 * 添加几何物体
 */
// 创建酷炫三角形
for (let i = 0; i < 50; i++) {
  const geometry = new THREE.BufferGeometry();
  // 创建点位
  const vertices = new Float32Array(9);
  for (let j = 0; j < 9; j++) {
    vertices[j] = Math.random() * 10 - 5;
  }
  // 因为itemSize=3，所以每个顶点都是一个三元组
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  let color = new THREE.Color(Math.random(), Math.random(), Math.random());
  const material = new THREE.MeshBasicMaterial({
    color: color,
    transparent:true,
    opacity:0.5
  });
  const mesh = new THREE.Mesh(geometry, material);
  console.log(mesh);
  //将物体添加到场景
  scene.add(mesh);
  gsap.to(mesh.rotation, {
    x: 2 * Math.PI,
    y: 2 * Math.PI,
    duration: 5,
    ease: "powerl.inOut",
    repeat: -1,
  });
}

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的内容添加到body中
document.body.appendChild(renderer.domElement);

// 创建一个控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// 使用渲染器，通过相机将场景渲染进来

// // 初始化可视化工具
// const gui = new dat.GUI()
// // 添加属性
// gui.add(mesh.position,'x').min(0).max(5).step(0.01).name('移动X轴')
// // 添加修改颜色属性
// const params = {
//     color:"#00ff00",
// }
// gui.addColor(params,"color").onChange((value)=>{
//     mesh.material.color.set(value)
//     // console.log(value);
// })

// 设置动画
// 平移
//  let animate1 = gsap.to(cube.position, {
//   x: 5,
//   duration: 5,
//   ease: "powerl.out",
//   // 设置重复次数,无限次就是-1
//   repeat: -1,
//   //   设置往返循环
//   yoyo: true,
//   onStart: () => {
//     console.log("动画开始了！");
//   },
//   onComplete: () => {
//     console.log("动画结束了！");
//   },
// });
// // 旋转
// gsap.to(cube.rotation, {
//   x: 2 * Math.PI,
//   duration: 5,
//   ease: "powerl.inOut",
//   repeat: -1,
// });

//双击屏幕暂停与开始动画
window.addEventListener("dblclick", () => {
  // animate1.pause()
  // 判断是否有动画
  controls.update();
  // if(animate1.isActive()){
  //     animate1.pause()//暂停
  //     console.log('暂停');
  // }else{
  //     animate1.resume()//恢复
  //     console.log('恢复');

  // }
});

function animate() {
  renderer.render(scene, camera);
  // 渲染下一帧的时候就会调用animate函数
  requestAnimationFrame(animate);
}

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});
animate();
